<template>
  <el-header class="headers">
    <div class="logo">
      <el-image
        style="width: 30px; height: 30px; border-radius: 50%"
        :src="headers.VITE_APP_HEAD"
        fit="fill"
      />
      <span style="margin-left: 20px">{{ headers.VITE_APP_TITLE }}</span>
    </div>
    <div class="toolbar">
      <el-dropdown>
        <el-icon style="margin-right: 8px; margin-top: 6px; color: #fff">
          <setting />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span>Tom</span>
    </div>
  </el-header>
</template>
<script setup>
import { ref } from "vue";
const headers = ref(import.meta.env);
</script>

<style lang="scss" scoped>
.headers {
  padding: 0 20px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(67, 56, 202);
  color: #fff;
}
.logo {
  display: flex;
  align-items: center;
}
</style>